<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <script src="/static/js/jquery-3.5.1.min.js"></script>

    <script type="text/javascript" src="/static/js/vue.min.js"></script>
    <script type="text/javascript" src="/static/js/iview.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/iview.min.css">
    <link rel="stylesheet" href="/static/js/element-ui/lib/theme-chalk/index.css">
    <script src="/static/js/element-ui/lib/index.js"></script>
    <style type="text/css">
        :root {
            --info-div-portion: 30%;
            --chart-div-portion: 70%;
        }

    </style>
</head>

<body style="height: 100%;width: 100%; margin: 0">


<div id="app" style="display: inline-block;width: 100%;height: 100%" class="infoDiv">
    <el-row>
        <el-col :span="24">
            <el-tree :data="tutorials" style="width: 100%" @node-click="onTableRowClick" default-expand-all>
            </el-tree>
        </el-col>

    </el-row>

</div>


<script>

    function DemoProject() {
        this.url = ""
        this.name = ""
        this.author = ""
    }

    function beginFetchJsonData(url = "", callback = null, type = "GET") {
        $.ajax({
            url: url,
            type: type,
            success: function (res) {
                const resJson = $.parseJSON(res);
                callback(resJson)
            }
        })
    }

    function updateTutorials(projects_tree) {
        let projs = []
        for (let key in projects_tree) {
            let p = {
                label: key,
                children: []
            }
            for (let i = 0; i < projects_tree[key].length; i++) {
                p.children.push({
                    label: projects_tree[key][i].name,
                    author: projects_tree[key][i].author,
                    url: projects_tree[key][i].url,
                })
            }
            projs.push(p)
        }
        vue.$data.tutorials = projs
    }

    var vue = new Vue({
        el: '#app',
        data: {
            tutorials: null

        },
        methods: {
            onTableRowClick(data) {
                console.log(data)
                window.open(data.url);
            },
            onTempVariablesTableRowClick(row, column, event) {
                console.log(row.name)
                let tempVarName = row.name;
                let highlightedKeys = []
                for (let key in dataRecv.blocks) {
                    let tempVarsDefined = dataRecv.blocks[key].temp_variables_defined;
                    let tempVarsUsed = dataRecv.blocks[key].temp_variables_used;
                    let tempVarsReferred = tempVarsDefined.concat(tempVarsUsed);
                    for (let i = 0; i < tempVarsReferred.length; i++) {
                        if (tempVarsReferred[i] === tempVarName) {
                            highlightedKeys.push(key)
                            break
                        }
                    }
                }
                console.log(highlightedKeys);
                for (let i in option.series[0].data) {
                    if (inArray(option.series[0].data[i].id, highlightedKeys)) {
                        option.series[0].data[i]["itemStyle"] = {color: "#0000ff"};
                    } else {
                        option.series[0].data[i]["itemStyle"] = {color: "#d53a35"};
                    }
                }
                myChart.setOption(option);
            },
        }
    })

    beginFetchJsonData("/tutorials", updateTutorials)


</script>
</body>

</html>